<template>
	<div class="default-main">
		<h2 style="margin-bottom: 20px">测试页</h2>
		<el-button @click="$router.go(0)">刷新页面</el-button>
		<el-button @click="appStore.refreshApp">刷新app</el-button>
		<el-button @click="() => navTabsStore.refreshTab()">刷新tab页</el-button>
		<el-button @click="sendEvent">发送全局事件</el-button>
	</div>
</template>

<script lang="ts" name="Test" setup>

import {useNavTabsStore} from '@/stores/modules/navTabs.store'
import {useAppStore} from '@/stores/modules/app.store'
import eventBus from '@/utils/eventBusUtil'
import {messageSuccess} from '@/utils/commonUtil'
import {onMounted, onUnmounted} from 'vue'

const appStore = useAppStore()
const navTabsStore = useNavTabsStore()

const sendEvent = () => {
	eventBus.emit('event1', 'hello')
	eventBus.emit('event2', [1, 2, 3])
	eventBus.emit('event3', {a: '你好', b: 666})
}

onMounted(() => {
	// 可以在任意组件中监听
	eventBus.on('event1', (data) => {
		messageSuccess(data)
	})
	eventBus.on('event2', (data) => {
		messageSuccess(JSON.stringify(data))
	})
	eventBus.on('event3', (data) => {
		messageSuccess(JSON.stringify(data))
	})
})

onUnmounted(() => {
	// 卸载组件时取消监听
	eventBus.off('event1')
	eventBus.off('event2')
	eventBus.off('event3')
})

</script>

<style lang="scss" scoped>
</style>
